<template>
  <div class="container_border" :style="wrapperStyle">
    <div class="title_header">
      <slot name="title_l" ></slot>
      <slot name="title_r" > </slot>
    </div>
    <div class="main_info" :style="styleText">
      <slot name="main_info" ></slot>
    </div>
  </div>
</template>

<script setup>
defineProps({
  styleText: {
    default: ''
  },
  wrapperStyle: {
    type: [String, Object],
    default: ''
  }
})
</script>
<style lang="scss" scoped>
.container_border {
  border: 1px solid #e2e8f4;
  border-radius: 4px;
  .title_header {
    height: 52px;
    display: flex;

    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    color: #011948;
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1px solid #e2e8f4;
  }
  .main_info {
    padding: 16px;
  }
}
</style>
